<template>
    <!--    <label class="flex flex-col md:flex-row md:items-center w-full">-->
    <!--        <div class="w-36 leading-10 md:text-right">{{ label }}</div>-->
    <!--        <input v-model="childVal" @input="bindVal" class="border rounded w-full outline-none p-2" spellcheck="false"-->
    <!--               :placeholder="placeholder" :type="type" :readonly="readonly"/>-->
    <!--    </label>-->


    <label class="flex flex-col md:flex-row md:items-center w-full">
        <div class="w-36 leading-10 md:text-right">{{ label }}</div>
        <div class="flex border rounded w-full">
            <input v-model="childVal" @input="bindVal" class="w-full outline-none p-2" spellcheck="false"
                   :placeholder="placeholder" :type="type" :readonly="readonly"/>
            <slot name="right"></slot>
        </div>
    </label>


</template>

<script>
export default {
    name: "hInput",
    components: {},
    props: {
        value: String,
        label: {
            type: String,
            default: null
        },
        placeholder: {
            type: String,
            default: null
        },
        type: {
            type: String,
            default: 'text'
        },
        readonly: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            childVal: null
        }
    },
    computed: {},
    watch: {
        value(newVal) {
            this.childVal = newVal;
        }
    },
    mounted() {
    },
    methods: {
        bindVal() {
            this.$emit('input', this.childVal);
        }
    }
}
</script>

<style scoped>

</style>
